import React from "react";
import Link from "next/link";

import {
  ShoppingCart,
  Heart,
  User,
  House,
  Flame,
  Percent,
  Plus,
  Phone,
  Grid2X2,
} from "lucide-react";
import Logo from "./logo";

const Navbar = () => {
  return (
    <nav className="bg-white text-gray-800 pb-4">
      <div className="container mx-auto">
        <div className="flex justify-between items-center">
          <div>
            <Link href="/" className="flex items-center space-x-2">
              <div className="p-2 ">
                <Logo />
              </div>
            </Link>
          </div>
          <div className="flex items-center space-x-20">
            <Link
              href="/wishlist"
              className="flex items-center space-x-2 hover:text-primary"
            >
              <Heart className="w-5 h-5" />
              <span>Wishlist</span>
            </Link>
            <Link
              href="/cart"
              className="flex items-center space-x-2 hover:text-primary"
            >
              <ShoppingCart className="w-5 h-5" />
              <span>My Cart</span>
            </Link>
            <Link
              href="/profile"
              className="flex items-center space-x-2 hover:text-primary"
            >
              <User className="w-5 h-5" />
              <span>User Name</span>
            </Link>
          </div>
        </div>
        <div className="flex justify-between items-center mb-2">
          <div className="flex border-2 border-gray-600 p-2 rounded-sm space-x-7 ml-2">
            <div>
              <Grid2X2 />
            </div>
            Browse All Categories
          </div>
          <div className="flex space-x-32">
            <div className="flex">
              <House className="w-5 h-5" />
              <Link href="/" className="hover:text-primary">
                Home
              </Link>
            </div>
            <div className="flex">
              <Flame className="w-5 h-5" />
              <Link href="/hot-deals" className="hover:text-primary">
                Hot Deals
              </Link>
            </div>
            <div className="flex">
              <Percent className="w-5 h-5" />
              <Link href="/promotions" className="hover:text-primary">
                Promotions
              </Link>
            </div>
            <div className="flex">
              <Plus className="w-5 h-5" />
              <Link href="/new-products" className="hover:text-primary">
                New Products
              </Link>
            </div>
          </div>
          <div className="flex items-center space-x-2 text-sm">
            <Phone className="w-5 h-5" />
            <span>+61000000000</span>
            <span className="text-xs text-gray-500">24/7 support center</span>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;
